import { Button, Col, Form, Input, Row, Select, Space } from "antd"
import React from "react"

const App: React.FC = () => {
  const [form] = Form.useForm()

  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  return (
    <Form
      form={form}
      name="searchForm"
      labelAlign="right"
      labelCol={{ span: 8 }}
      style={{ margin: '10px 0' }}
      onFinish={onFinish}
    >
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item
            label="name"
            name="name"
            rules={[{ required: true, message: 'Please input your NAME!' }]}          
          >
            <Input placeholder="name" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label="qq"
            name="qq"
            rules={[{ required: false, message: 'Please input your QQ!' }]}          
          >
            <Input placeholder="qq" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label="wx"
            name="wx"
            rules={[{ required: false, message: 'Please input your WX!' }]}          
          >
            <Input placeholder="wx" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label="sex"
            name="sex"
            rules={[{ required: false, message: 'Please select your sex!' }]}          
          >
            <Select placeholder="select">
              <Select.Option value="male">male</Select.Option>
              <Select.Option value="female">female</Select.Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label="tel"
            name="tel"         
          >
            <Input placeholder="tel" />
          </Form.Item>
        </Col>
      </Row>
      <div style={{ textAlign: 'right' }}>
        <Space size="small">
          <Button
            type="primary"
            htmlType="submit"
          >Search</Button>
          <Button
            onClick={() => {
              form.resetFields()
            }}
          >Reset</Button>
        </Space>
      </div>
    </Form>
  )
}

export default App
